<template>
  	<uni-actionsheet :show="popData.isShow">
			<view class="drawer">
				<view class="cont-box">
					<view class="pop-head">
            <text class="tit">{{popData.title}}</text>
            <text class="close" @click="onCancel">
              取消
            </text>
          </view>
					<view
						v-for="(Item,Index) in popData.actions"
						:key="Index"
						class="li b-b"
						@click="chooseHandler(Item)"
					>
            <label class="radio" @click="changeRadio">
              <h-icon src="selected" v-if="currentId==Item.id"></h-icon>
              <h-icon src="select" v-else></h-icon>
            </label>
						<text class="iconfont" :class="Item.icon"></text>
            <text class="text">{{Item.name}}</text>
            <text class="balance" v-if="Index==1">剩余￥25.55</text>
					</view>
					<view class="cancel" @click="onConfirmSelect">
            <text class="btn-link">确定</text>
          </view>
				</view>
			</view>
		</uni-actionsheet>
</template>
<script>

export default {
  props: {
    orderId:{
      type: [Number,String],
      default:''
    },
    margin:{ // 是否是支付保证金
      type:Boolean,
      default:false
    }
  },
  watch:{
    orderId:{
      handler(newVal){
        if(newVal) {
          this.$apis.postApi(`/order/preOrder?orderId=`+newVal,{orderId:newVal}).then(({code,data})=>{
            if(code==200){
              this.res = data
            }
          })
        }
      },
      deep:true,
      immediate: true
    }
  },
  data() {
    return {
      popData:{
        isShow:false,
        title: '支付方式',
        actions:[
          { name: '微信支付',icon:'icon-weixin',id:1 },
          // { name: '余额支付',icon:'icon-yuebao',id:2 }
        ]
      }, // 弹窗信息
      currentId:1,
      res:{}
    }
  },
  methods: {
    showPicker(){
      this.popData.isShow = true
      uni.hideTabBar()
    },
    onCancel(){
      this.popData.isShow = false
      uni.showTabBar()
    },
    changeTab(item) {
      this.currentId = item.id
    },
    //确认支付
    onConfirmSelect() {
      const res = this.res
      if(res&&res.package) {
        uni.requestPayment({
          appId:res.appId,
          timeStamp: res.timeStamp,
          nonceStr: res.nonceStr,
          package: res.package,
          signType: res.signType,
          paySign: res.paySign,
          success: (e) => {
            if (e.errMsg === 'requestPayment:ok') {
              this.$api.msg('支付成功')
              this.$emit('onConfirm', true)
              this.onCancel()
            }
          }
        })
      } else {
        this.$api.msg('订单有误')
        this.onCancel()
      }
    },
    chooseHandler(item){
      this.currentId = item.id
      // this.onCancel()
    },
  }
}
</script>
<style lang="scss" scoped>
.pop-head{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 106upx;
  position: relative;
  .tit{
    font-size: 32upx;
    font-weight: bold;
  }
  .close{
    position: absolute;
    right: 20upx;
    color: #DD0717;
    font-size: 30upx;
  }
}
.cont-box{
  .li{
    height: 98upx;
    font-size: 28upx;
    position: relative;
    padding: 0 20upx;
    display: flex;
    align-items: center;
    font-weight: 400;
    .iconfont{
      font-size: 42upx;
      width: 62upx;
    }
    .balance{
      margin-left: auto;
      color: #999999;
    }
    &:after{
      left: 74upx;
    }
  }
  .cancel{
    margin: 56upx;
  }
}
</style>